<script setup>
import { ref, getCurrentInstance  } from 'vue'
import { useRouter} from 'vue-router'
import loginApi from '@/api/loginApi'
import microapp from '@micro-zoe/micro-app'

const activeIndex = ref()
const router = useRouter()
const globalData = microapp.getGlobalData()
const {proxy} = getCurrentInstance()
const handleSelect = (e) => {
    switch (e) {
        case 'home':
        router.push({name: 'childHome'});
        break;
        case 'job':
        router.push({name: 'childJob'});
        break;
        case 'enterprise':
        router.push({name: 'childEnterprise'});
        break;
        case 'about':
        router.push({name: 'childAbout'});
        break;
    }
}
function logout() {

    loginApi.logout().then(res => {
        const {success,message} = res
        if(success){
            microapp.clearGlobalData();
            proxy.$message.success('退出成功！');
            router.go(0);
        }else{
            proxy.$message.error(message);
        }
    })
}

</script>

<template>
   <div class="common-header">
        <el-menu
            :default-active="activeIndex"
            background-color="#202329"
            text-color="#fff"
            mode="horizontal"
            active-text-color="#ffd04b"
            @select="handleSelect"
        >
        <span class="logo">DOSS直聘</span>
        <el-menu-item index="home">首页</el-menu-item>
        <el-menu-item index="job">找工作</el-menu-item>
        <el-menu-item index="enterprise">找企业</el-menu-item>
        <el-menu-item index="about">关于我们</el-menu-item>
        <el-button round plain size="small" v-if="globalData && globalData.token" type="primary" class="login-btn" @click="logout">退出</el-button>
        <el-button round plain size="small" v-else type="primary" class="login-btn" @click="() => router.push({name: 'login'})">登录</el-button>
        </el-menu>
   </div>
</template>

<style scoped lang="scss">
    .common-header {
        background-color: #202329;
        .el-menu {
            display: flex;
            margin: 0 auto;
            width: 1200px;
            border: none;
            padding-left: 200px;
            .el-menu-item{
                height: 46px;
                font-size:20px;
                top:8px;
        }         
    }
    .login-btn {
        background-color:#ffffff;
        position: absolute;
        right: 15px;
        top: 18px;
        width:80px;
        font-size: 16px;
        color:#000000;
    }
    .logo {
        color: rgb(221, 130, 10);  
        font-size: 30px;
        font-weight: bold;
        position: absolute;
        line-height: 24px;
        left: 15px;
        top: 15px;
        cursor: pointer;
    }
}
</style>